<template>
    <HoverEnlargable
            :closable="closable!==undefined?closable:true"
            style="
              --aniToWidth:250px;
              --aniToHeight:fit-content;
              --shrinkedWidth:50px;
              --shrinkedHeight:18px;
              --overlieWidth:11px;
              --aniFromWidthType:--shrinkedWidth;
              --hoveringPadding:7px;
              border: 1px solid blue;
              margin-left: 3px"
            :style="{zIndex:parseInt($attrs[`zIndex`])}">
        <div class="theRmkContent" v-if="contentHtmlStr&&contentHtmlStr?.length>0">
            <contentHtmlNode/>
        </div>
        <div v-else="contentHtmlStr&&contentHtmlStr?.length>0">
            <slot></slot>
        </div>
    </HoverEnlargable>
</template>

<script setup>
import HoverEnlargable from "@/components/HoverEnlargable.vue";
import {h,defineProps} from "vue";

let props = defineProps(["contentHtmlStr","closable"])
// let content = `<p style="line-height: 1;">s<strong><span style="color: rgb(132, 63, 161);">dfsda</span>fa</strong>dsf</p> <ul> <li style="line-height: 1;">dsfsadfdsf</li> <li style="line-height: 1;">s<strong>dfsdfs</strong>d</li> <li style="line-height: 1;">sdfsdfsdfsd</li> </ul>`;
import PhraseOWordUsage from "@/models/PhraseOWordUsage";
const contentHtmlNode = ()=>{
    let theWordSpan = h("span", {
        // innerHTML: content
        innerHTML: props.contentHtmlStr
    });

    return [theWordSpan];
}
</script>

<style scoped>
:global(.theRmkContent p){
    margin-block-start: 0;
    margin-block-end: 0;
}

:global(.theRmkContent ul){
    margin-block-start: 0;
    margin-block-end: 0;
}
</style>